<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的会员卡</title>
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
    	<style type="text/css">
    		body{
    			background-color: #fff;margin: 0
    		}
				#header-bg{margin-top: 20px;			padding: 0 15px;width: 100%;box-sizing: border-box;}
			.content-box{
				width:100%;
				box-sizing: border-box;

				margin: 0 auto;
				background-color: #fff  !important;
			}
			.title-box{
				height: 30px;
				text-align: center;

			}
			.title-box img{
				width: 7px;
				height: 12px;
				float: left;
				margin-top: 10px;

			}
			.title-box p{
				display: inline-block;
				margin: 0 auto;
				color: #333;
				line-height: 30px;
				font-size: 14px;
			}
			/*会员卡*/
			.content-bg-text{
				width: 100%;
				height:115px;
				background-color: #fc6d4d;
				margin: 0 auto;
				border-radius: 10px;margin-bottom:15px;
			}
			.cont-left{
				width: 90%;
				height: 100%;
				float: left;box-sizing: border-box;
			}
			.cont-img{
				width: 60px;
				height: 60px;
				border-radius: 50%;
				background-color: #fcc;
				float: left;
				margin: 28px 0 0 15px;box-sizing: border-box;;overflow: hidden
			}
			.cont-img img{width: 100%}
			.cont-text{
				width: 60%;
				height: 55px;
				margin: 28px 0 0 10px;
				float: left;
				position: relative;
			}
			.cont-text p{
				color: #fff;
				margin: 8px 0 0 0;
				font-size: 13px;
			}
			.cont-text span{
				color: #fff;
				font-size: 12px;
				position: absolute;
				bottom: 5px;
				left: 0;
			}
			.clear{
				clear: both;
				width: 0;
				height: 0;
			}
			.cont-right{
				width: 10%;
				height: 55px;
				float: right;
				margin: 30px 0 0 0;
				position: relative;
			}
			.cont-right img:nth-of-type(1){
				width: 12px;
				height: 12px;
				position: absolute;
				bottom: 5px;
				left: 0;
			}
			.cont-right img:nth-of-type(2){
				width: 12px;
				height: 12px;
				position: absolute;
				bottom: 5px;
				left: 13px;
			}
    	</style>
	</head>
	<body>
	<!--我的积分-->
	<section class="aui-head" id="header-bg">

		<div class="content-bg-text" onclick="erweima()">
			<div class="cont-left">
				<div class="cont-img"><img :src="img" alt=""></div>
				<div class="cont-text">
					<p>{{name}}</p>
					<span>卡号:{{kahao}}</span>
				</div>
			</div>
			<div class="cont-right">
				<img src="../../image/er.png">
				<img src="../../image/back_blank.png" style="transform:rotate(180deg)">
			</div>
		</div>
	</section>
	</body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
apiready = function(){
	var joinitem = new Vue({
						 el: '#header-bg',
					   data: {
										name:$api.getStorage('name'),
										kahao:$api.getStorage('member'),
										img:$api.getStorage('touxiang')

						 }
								      })

};

function erweima(){
	api.openWin({
	    name: 'ewm_win',
	    url: 'ewm_win.html',
	    pageParam: {
	        name: 'test'
	    }
	});

}


</script>


</html>
